<template>
  <div class="bg">
    <!-- 头部 -->
    <van-sticky>
      <van-nav-bar v-if="isHome" title="黑马优购" />
      <van-nav-bar v-else title="黑马优购">
        <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
          <van-icon name="arrow-left" />
          <span>返回</span>
        </div>
      </van-nav-bar>
    </van-sticky>
    <!-- swipe 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :height="375" :autoplay="3000" indicator-color="white">
        <van-swipe-item :v-model="picslist" v-for="(item,index) in picslist" :key="index">
          <img :src="item.pics_big" alt @click="showTp(index)" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 价格,名称 -->
    <div class="box">
      <!-- 价格 -->
      <div class="price">
        ￥{{this.detailsList.goods_price}}
        <van-icon name="star-o" size="10px" class="star" />
      </div>
      <!-- 名称 -->
      <van-row class="left">
        <van-col span="19" class="goodsname">{{this.detailsList.goods_name}}</van-col>
        <van-col span="2" offset="3">收藏</van-col>
      </van-row>
      <div class="yf">快递：免运费</div>
    </div>
    <!-- 促销与已选样式 -->
    <div class="box1">
      <van-row>
        <van-col>
          <span>促销：</span>
          <span class="p1">满300元减30元</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <span>已选：</span>
          <span class="p1">黑色/S/1件</span>
        </van-col>
      </van-row>
    </div>
    <!-- 收货地址 -->
    <div class="adress" @click="ToAdress">
      <span>送至：</span>
      <span class="p1">请选择收货地址</span>
      <van-icon name="arrow" size="12px" />
    </div>
    <!-- tab标签页 -->
    <div class="tab">
      <van-tabs v-model="activeName">
        <van-tab title="图文详情" name="a">
          <div v-html="this.detailsList.goods_introduce"></div>
        </van-tab>
        <van-tab title="规格参数" name="b">
          <div class="guige" v-for="(item ,index ) in this.detailsList.attrs " :key="index">
            <van-row>
              <van-col class="left" span="10">{{item.attr_name}}</van-col>
              <van-col span="14">{{item.attr_vals}}</van-col>
            </van-row>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onChat" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="onClickIcon"
        :badge="sum == 0 ? '' : sum"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
    </van-goods-action>

    <!-- 图片预览功能  Overlay 遮罩层-->
    <van-overlay :show="show" @click="show = false" :v-model="src">
      <div class="wrapper">
        <span class="top">{{this.i + 1}}/{{this.picslist.length}}</span>
        <div class="block">
          <img :src="src.pics_big" alt />
        </div>
      </div>
    </van-overlay>
    <!-- 客服 -->
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      // 商品图片列表
      detailsList: [],
      // 商品图片列表
      picslist: [],
      // 商品id
      GoodsId: 0,
      //
      activeName: "a",
      //控制遮罩层的显示与隐藏
      show: false,
      // 图片的索引
      i: 0,
      src: [],
      // 购物车数量
      sum: 0
    };
  },
  created() {
    const url = this.$route.path.split("/");
    // console.log(url);
    this.GoodsId = url[url.length - 1];
    console.log(this.GoodsId);
    this.getpicslist();
  },
  computed: {
    isHome: function() {
      if (this.$route.path == "/" || this.$route.path == "/home") {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    // 获取商品详情列表数据
    async getpicslist() {
      const { data: res } = await this.$http.get("/goods/detail", {
        params: { goods_id: this.GoodsId }
      });
      if (res.meta.status !== 200) {
        return this.$toast.fail("数据获取失败");
      }
      console.log(res);
      this.detailsList = res.message;
      // console.log(this.detailsList.goods_introduce);
      this.picslist = res.message.pics;
    },
    // 控制遮罩层的显示与隐藏
    async showTp(index) {
      this.i = index;
      // console.log(index, this.i, id);
      const { data: res } = await this.$http.get("/goods/detail", {
        params: { goods_id: this.GoodsId }
      });
      if (res.meta.status !== 200) {
        return this.$toast.fail("数据获取失败");
      }
      this.src = res.message.pics[this.i];
      // console.log(this.src);
      this.show = true;
    },
    // 点击购物车
    onClickIcon() {
      this.$router.push("/cart");
    },
    // 点击购物车按钮
    onClickButton() {
      this.sum++;
    },
    // 对收货地址进行点击事件
    ToAdress() {
      this.$router.push("/address_list");
    },
    onChat() {
      Dialog.alert({
        title: "模拟进入客服会话",
        message: "开发者工具暂不支持打开客服会话，请使用真机调试"
      }).then(() => {
        // on close
      });
    }
  }
};
</script>

<style lang='less' scoped>
.bg {
  position: relative;
  margin: 0 auto;
  background-color: #efefef;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  img {
    width: 100%;
    height: 375px;
  }
}
.box {
  margin: 0;
  padding: 0 5px;
  background-color: #fff;
  .price {
    position: relative;
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #ff0000;
    .star {
      position: absolute;
      right: 15px;
      bottom: -15px;
      color: #000;
    }
  }
  .left {
    font-size: 13px;
    .goodsname {
      padding-right: 20px;
      border-right: 1px solid #f3f3f3;
    }
  }
  .yf {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: #666666;
  }
}
.box1 {
  height: 80px;
  margin-top: 5px;
  padding: 0 10px;
  font-size: 12px;
  background-color: #fff;
  .van-col {
    height: 40px;
    line-height: 40px;
    .p1 {
      color: #666666;
    }
  }
}
.adress {
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
  padding: 0 10px;
  font-size: 12px;
  background-color: #fff;
  .p1 {
    color: #666666;
  }
  .van-icon {
    float: right;
    margin: 13px;
  }
}
.tab {
  background-color: #fff;
  margin-top: 5px;
  .guige {
    height: 66px;
    line-height: 66px;
    font-size: 12px;
    border-top: 1px solid #efefef;
    .van-row {
      border-bottom: 1px solid #efefef;
    }
    .van-col {
      padding-left: 10px;
    }
    .left {
      border-right: 1px solid #efefef;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  display: block;
  width: 100%;
  height: 375px;
  line-height: 375px;
  img {
    width: 100%;
  }
}
.top {
  position: absolute;
  top: 0;
  margin-top: 10px;
  width: 20px;
  height: 10px;
  color: #fff;
}
</style>